<template>
  <div class="row">
    <!--问题分类-->
    <div class="col-md-3">
      <!--新增意见的按钮-->
      <a class="btn btn-primary btn-block margin-bottom" @click.prevent="handleAdd">新增</a>
      <!--意见分类列表-->
      <div class="box box-solid">
        <div class="box-header with-border">
          <h3 class="box-title">问题分类</h3>
        </div>
        <div class="box-body no-padding">
          <ul class="nav nav-pills nav-stacked">
            <li :key="1" :class="{active:currentIssueStatus === IssueStatus.WAIT}"><a @click.prevent="handleChange(IssueStatus.WAIT)"><i class="fa fa-comment-o"></i>待解决<span class="label label-primary pull-right">{{!!issueCount[0]?issueCount[0]:0}}</span></a></li>
            <li :key="2" :class="{active:currentIssueStatus === IssueStatus.SOLVING}"><a @click.prevent="handleChange(IssueStatus.SOLVING)"><i class="fa fa-spinner"></i>正在解决<span class="label label-info pull-right">{{!!issueCount[1]?issueCount[1]:0}}</span></a></li>
            <li :key="3" :class="{active:currentIssueStatus === IssueStatus.COMPLETE}"><a @click.prevent="handleChange(IssueStatus.COMPLETE)"><i class="fa fa-check"></i>已经解决<span class="label label-success pull-right">{{!!issueCount[2]?issueCount[2]:0}}</span></a></li>
            <li :key="4" :class="{active:currentIssueStatus === IssueStatus.FUTURE}"><a @click.prevent="handleChange(IssueStatus.FUTURE)"><i class="fa fa-hourglass-half"></i>将来解决<span class="label label-warning pull-right">{{!!issueCount[3]?issueCount[3]:0}}</span></a></li>
            <li :key="5" :class="{active:currentIssueStatus === IssueStatus.INVALID}"><a @click.prevent="handleChange(IssueStatus.INVALID)"><i class="fa fa-trash-o"></i>无效问题<span class="label label-danger pull-right">{{!!issueCount[4]?issueCount[4]:0}}</span></a></li>
          </ul>
        </div>
      </div>
    </div>
    <!--对应的表格界面-->
    <div class="col-md-9" v-show="currentView === ISSUE">
      <FrontSideTable
        ref="issueTable"
        dataUrl="/help/issue/getList"
        addUrl="/help/issue/add"
        :dataParam="dataParam"
        tableTitle="问题列表"
        :columns="columns"
        searchHint="输入关键字进行搜索，多个关键字用空格隔开"
        :searchProp="searchProp"
        :form="form"
        :rules="rules"
        customButton>

        <template slot="beforeColumns">
          <!--扩展照片-->
          <!--展开照片列表-->
          <el-table-column type="expand">
            <template slot-scope="scope">
              <PhotoWall
                :canOperate="$store.state.User.currentUser.id === scope.row.createUser"
                :defaultList = "scope.row.photoList"
                imageUrl="/help/issue/getMediumIssuePhoto"
                thumbnailUrl="/help/issue/getMiniIssuePhoto"
                uploadUrl="/help/issue/saveIssuePhoto"
                deleteUrl="/help/issue/deletePhoto"
                :uploadParam="scope.row"
                @onClose="photoList=>scope.row.photoList=photoList">
              </PhotoWall>
            </template>
          </el-table-column>

          <!--索引列-->
          <el-table-column type="index" align="center" width="80px"></el-table-column>
        </template>

        <!--表单-->
        <template slot="form">
          <el-form-item label="标题" prop="title">
            <el-input v-model="form.title" placeholder="请输入问题标题"></el-input>
          </el-form-item>
          <el-form-item label="问题描述" prop="content">
            <el-input type="textarea" :rows="5" v-model="form.content" placeholder="请输入问题描述"></el-input>
          </el-form-item>
        </template>

        <!--按钮列-->
        <template slot="afterColumns">
          <el-table-column label="操作" align="center" width="200px">
            <template slot-scope="scope">
              <el-button size="small" @click="handleView(scope.row)">查看</el-button>
              <el-button v-if="$store.state.User.currentUser.roleName==='系统管理员'" size="small" type="primary" @click="handleStatus(scope.row)">状态</el-button>
              <el-button v-if="$store.state.User.currentUser.roleName==='系统管理员'" size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </template>
      </FrontSideTable>
    </div>

    <!--查看详细界面-->
    <ReadIssue v-if="currentView === ISSUE_DETAIL" :data="currentIssue" @onBack="handleBack"></ReadIssue>

    <!--更改状态-->
    <el-dialog title="更新问题状态" size="tiny" v-model="isStatusDialogVisible">
      <el-form :model="issueForm" ref="form" :rules="issueRules" label-width="150px">
        <el-form-item label="状态" prop="status">
          <el-select v-model.number="issueForm.status" style="width: 100%;" placeholder="选择问题状态">
            <el-option key="1" label="待解决" :value="1"></el-option>
            <el-option key="2" label="正在解决" :value="2"></el-option>
            <el-option key="3" label="已经解决" :value="3"></el-option>
            <el-option key="4" label="将来解决" :value="4"></el-option>
            <el-option key="5" label="无效问题" :value="5"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isStatusDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="update" :loading="isUpdating">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import FrontSideTable from "../../template/FrontSideTable.vue"
  import PhotoWall from "../../template/PhotoWall.vue"
  import ReadIssue from "../../template/ReadIssue.vue"
  import * as IssueStatus from "../../../assets/js/enum/IssueStatus"
  import {doDelete, doGet, doPost} from "../../../assets/js/utils/RequestUtils";
  import {SUCCESS} from "../../../assets/js/enum/RequestResult";

  const ISSUE = 1;

  const ISSUE_DETAIL = 2;

  const ISSUE_COUNT_URL = "/help/issue/getIssueCount";

  const UPDATE_URL = "/help/issue/updateStatus";

  const DELETE_URL = "/help/issue/delete";

  export default {
    name:"Issue",
    data() {
      return {
        currentView:ISSUE,
        currentIssueStatus:IssueStatus.WAIT,
        currentIssue:{},
        issueCount:[],
        columns:[
          {prop:"title", label:"内容"},
          {prop:"createUserName", label:"创建人", width:"150"},
          {prop:"createDate", label:"创建时间", width:"150", sortable:true}
        ],
        dataParam:{
          status:IssueStatus.WAIT
        },
        searchProp:["title", "content", "createUserName", "createDate"],
        form:{},
        rules:{
          title:[
            {required:true, message:"请输入标题", trigger:"blur"}
          ],
          content:[
            {required:true, message:"请输入问题描述", trigger:"blur"}
          ]
        },
        //问题状态
        IssueStatus,
        isStatusDialogVisible:false,
        issueForm:{},
        issueRules:{
          status:[
            {required:true, type:"number", message:"请选择状态类别", trigger:"blur"}
          ]
        },
        isUpdating:false,
        //常量
        ISSUE,
        ISSUE_DETAIL
      }
    },
    methods:{
      handleChange(status) {
        this.currentIssueStatus = status;
        if(this.$refs["issueTable"]) this.$refs["issueTable"].fetchData({status});
      },
      handleAdd() {
        this.form = {};
        if(this.$refs["issueTable"]) this.$refs["issueTable"].handleAdd();
      },
      handleBack() {
        this.currentIssue = {};
        this.currentView = ISSUE;
      },
      handleView(data) {
        this.currentIssue = data;
        this.currentView = ISSUE_DETAIL;
      },
      handleStatus(data) {
        this.issueForm = data;
        this.isStatusDialogVisible = true;
      },
      handleDelete(rowData) {
        this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
          confirmButtonText:"确定",
          cancelButtonText:"取消",
          type:"warning"
        }).then(()=>{
          doDelete(DELETE_URL, {
            data:rowData,
            component:this
          })
            .then(response => {
              this.$message({message:response.message, type:response.status.toLowerCase()});
              this.fetchData();
            });
        });
      },
      fetchIssueCount() {
        doGet(ISSUE_COUNT_URL, {component:this}).then(response=>this.issueCount = response);
      },
      update() {
        this.$refs["form"].validate(valid => {
          if(valid) {
            this.isUpdating = true;
            doPost(UPDATE_URL, {
              data:this.issueForm,
              component:this
            })
              .then(response=>{
                //服务端返回成功，则进行后续操作
                if(response.status === SUCCESS) {
                  this.$message({message: response.message, type: response.status.toLowerCase()});
                  this.isStatusDialogVisible = false;
                  this.fetchData();
                } else {
                  this.$emit("onUpdateFailed", response);
                  this.$alert(response.message, "提示", {confirmButtonText:"确定"})
                }
              })
              .finally(()=>this.isUpdating = false);
          }
        })
      },
      fetchData() {
        this.fetchIssueCount();
        if(this.$refs["issueTable"]) this.$refs["issueTable"].fetchData();
      },
    },
    mounted() {
      this.fetchData();
    },
    components:{FrontSideTable, PhotoWall, ReadIssue}
  }
</script>



// WEBPACK FOOTER //
// Issue.vue?46ce3d5a
